<section id="finicial_voucher_rule_config_two">
  <div class="vocher-two-page">
    <div class="vocher-rule-menu-container">
      <div class="block-name">业务类型</div>
      <div class="vocher-rule-menu">
        <vue-scroll :ops="ops" style="height: 100%;">
          <div class="first-menu" v-for="(item,index) in voucherRules">
            <p class="first-name" :data-code="item.bizCategoryCode"
              :class="{'active':item.bizCategoryCode == bizCategoryCode && !voucherRulesId }">{{item.bizCategoryName}}
            </p>
            <ul class="second-menu">
              <li class="second-menu-item" :data-id="item1.id" :class="{'active':item1.id == voucherRulesId}"
                v-for="(item1,index1) in item.rules" @click="selectSecondMenu(item1.id,item1.bizCategoryCode)">
                <p class="second-name">{{item1.name}}</p>
              </li>
            </ul>
          </div>
        </vue-scroll>
      </div>

    </div>

    <div class="vocher-rule-details-container">
      <div class="block-name">
        <span>凭证规则</span>
      </div>
      <div class="layout">
        <section>
          <div class="line-height-34 dy-flex" style="marginBottom:12px;">
            <div class="dy-fx-1">业务类型：</div>
            <div class="dy-fx-9">{{bizCategoryName}}</div>
          </div>
          <div class="line-height-34 dy-flex" style="marginBottom:12px;">
            <div class="dy-fx-1">业务场景：</div>
            <div class="dy-fx-9">
              <input class="form-control inline" type="text" style="width:200px" v-model="bizTypeName">
            </div>
          </div>
          <div class="line-height-34 dy-flex" style="marginBottom:12px;" v-if="bizCategoryCode == 'SKYW'">
            <div class="dy-fx-1">业务标准：</div>
            <div class="dy-fx-9">
              <hl-radio class="fl" :data="standardList" v-model="standardActive"></hl-radio>
            </div>
          </div>
          <div class="line-height-34 dy-flex" style="marginBottom:12px;" v-if="bizCategoryCode == 'SKYW' || bizCategoryCode == 'SRQR'">
            <div class="dy-fx-1">场景类型：</div>
            <div class="dy-fx-9">
              <hl-radio class="fl" :data="dictList" v-model="selectedScene"></hl-radio>
            </div>
          </div>
          <div class="line-height-34 dy-flex" style="marginBottom:12px;">
            <div class="dy-fx-1">状态：</div>
            <div class="dy-fx-9">
              <hl-radio class="fl" :data="radioData" v-model="selectedVocherRuleState"></hl-radio>
            </div>
          </div>
          <div class="line-height-34 dy-flex" style="marginBottom:12px;">
            <div class="dy-fx-1">关联费项：</div>
            <div class="dy-fx-9">
              <hl-select @on-change="selectExpense($event)" :data="concatExpenseData" v-model="selectedExpense"
                type="primary" width="200" multiple cascade></hl-select>
            </div>
          </div>
          <div class="line-height-34 dy-flex">
            <div class="dy-fx-1">冲销规则：</div>
            <div class="dy-fx-9">
              <hl-select :data="reversalRuleData" v-model="selectedReversalRule" type="primary" width="200"></hl-select>
            </div>
          </div>
          <hl-divider></hl-divider>
        </section>
        <section v-for="(item,index) in selectedVocherData">
          <div class="dy-flex line-height-34"
            style="marginBottom:12px;justify-content: space-between;align-items: flex-end;">
            <div>
              <div class="dy-fx-1">凭证类别：</div>
              <div class="dy-fx-9">
                <hl-select :data="vocherTypeData" v-model="item.voucherTypeId" type="primary" width="200"></hl-select>
              </div>
            </div>
            <div>
              <hl-button type="outline" @on-click="addVoucherItem(index)">新增分录</hl-button>
            </div>
          </div>
          <div class="vocher-num-table">
            <div class="title dy-flex">
              <div class="dy-fx-2">摘要</div>
              <div class="dy-fx-2">会计科目</div>
              <div class="dy-fx-2">辅助核算</div>
              <div class="dy-fx-2">借方金额</div>
              <div class="dy-fx-2">贷方金额</div>
              <div class="dy-fx-2">金额正负规则</div>
              <div class="dy-fx-1">操作</div>
            </div>
            <ul class="dy-flex vocher-num-table-row" v-for="(single,one) in item.voucherDetails">
              <li class="dy-fx-2 vocher-num-table-item">
                <hl-select type="text" :data="summaryData" v-model="single.summarayIds" width="100%" multiple block>
                </hl-select>
              </li>
              <li class="dy-fx-2 vocher-num-table-item">
                <hl-select type="text" :data="accountingData" @on-change="selectSub($event,index,one)"
                  v-model="single.subjectId" width="100%" block>
                </hl-select>
              </li>
              <li class="dy-fx-2 vocher-num-table-item" style="justify-content: center;">{{single.fzhsText || '--'}}</li>
              <li class="dy-fx-2 vocher-num-table-item">
                <hl-select @on-change="single.loanAmountRuleCode = [0]" type="text" :data="lendData"
                  v-model="single.borrowAmountRuleCode" width="100%" block></hl-select>
              </li>
              <li class="dy-fx-2 vocher-num-table-item">
                <hl-select @on-change="single.borrowAmountRuleCode = [0]" type="text" :data="lendData"
                  v-model="single.loanAmountRuleCode" width="100%" block></hl-select>
              </li>
              <li class="dy-fx-2 vocher-num-table-item">
                <hl-select type="text" :data="ruleData" v-model="single.superpositionRule" width="100%" block>
                </hl-select>
              </li>
              <li class="dy-fx-1 vocher-num-table-item dy-flex" style="justify-content: center;">
                <a @click="item.voucherDetails.splice(one,1)">删除</a>
              </li>
            </ul>
          </div>
        </section>

        <hl-divider></hl-divider>
        <hl-button @on-click="addEditVoucherRule">保存</hl-button>

      </div>
    </div>

  </div>
</section>

<script src="modules/system_config/scripts/finicial_voucher_rule_config_two.js" charset="utf-8"></script>

<style type="text/css">
  .vocher-rule-menu-container {
    position: absolute;
    width: 230px;
    left: 0;
    top: 66px;
    bottom: 0;
    border: 1px solid #e5e5e5;
    border-left: 0;
    border-top-right-radius: 4px;
  }

  .vocher-rule-menu-container .block-name {
    height: 46px;
    line-height: 46px;
    color: #A5AAB7;
    padding-left: 16px;
    font-weight: bold;
    background-color: #EFEFEF;
  }

  .vocher-rule-menu {
    position: absolute;
    top: 45px;
    bottom: 45px;
    width: 100%;
  }

  .vocher-rule-menu .first-menu .first-name {
    color: #4B4B4B;
    font-weight: 500;
    height: 48px;
    line-height: 48px;
    box-sizing: border-box;
    padding-left: 16px;
    border-bottom: 1px solid #e5e5e5;
    cursor: pointer;
  }

  .vocher-rule-menu .first-menu .first-name:hover {
    background-color: #F7F7F7;
  }

  .vocher-rule-menu .first-menu .first-name.active {
    background-color: #5e67a5;
    color: #fff;
  }

  .vocher-rule-menu .second-menu-item {
    position: relative;
    border-bottom: 1px solid #e5e5e5;
    cursor: pointer;
  }

  .vocher-rule-menu .second-menu-item .delete-icon {
    display: none;
  }

  .vocher-rule-menu .second-menu-item:hover .delete-icon {
    display: block;
  }

  .vocher-rule-menu .second-menu-item:hover {
    background-color: #F7F7F7;
  }

  .vocher-rule-menu .second-menu-item.active {
    background-color: #5e67a5;
    color: #fff;
  }

  .vocher-rule-menu .second-menu-item.active .second-name {
    color: #fff;
  }

  .vocher-rule-menu .second-menu-item .second-name {
    height: 48px;
    line-height: 48px;
    box-sizing: border-box;
    padding-left: 36px;
    color: #666;
    font-size: 14px;
  }

  .vocher-rule-menu .second-menu-item .delete-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translate(0, -50%);
  }

  .vocher-rule-menu-container .add-btn {
    width: 100%;
    bottom: 0;
    height: 45px;
    line-height: 45px;
  }

  .vocher-rule-details-container {
    width: 770px;
    float: right;
    border: 1px solid #e5e5e5;
    margin-top: 10px;
    border-top-left-radius: 4px;
  }

  .vocher-rule-details-container .block-name {
    height: 45px;
    line-height: 45px;
    padding-left: 11px;
    font-weight: bold;
    color: #A5AAB7;
    background-color: #EFEFEF;
  }

  .vocher-rule-details-container .layout {
    padding: 20px 11px 20px;
  }

  .vocher-rule-table {
    border: 1px solid #e5e5e5;
    border-radius: 4px;
  }

  .vocher-rule-table .title {
    overflow: hidden;
    background-color: #F0F2FF;
    color: #A5AAB7;
    font-weight: bold;
  }

  .vocher-rule-table .title .item {
    float: left;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-right: 1px solid #e5e5e5;
  }

  .vocher-rule-table .title .item:first-child {
    text-align: left;
    padding-left: 21px;
  }

  .vocher-rule-table .first-item-row {
    overflow: hidden;
    background-color: #F9F9F9;
    height: 40px;
    line-height: 40px;
  }

  .vocher-rule-table .first-item-row .item {
    border-right: 1px solid #e5e5e5;
    text-align: center;
  }

  .vocher-rule-table .first-item-row .item:first-child {
    font-weight: bold;
    color: #4B4B4B;
    padding-left: 21px;
    text-align: left;
  }

  .vocher-rule-table .first-item-row .item:last-child {
    color: #337AB7;
    cursor: pointer;
  }

  .vocher-rule-table .second-item-row {
    overflow: hidden;
    height: 40px;
    line-height: 40px;
    color: #666666;
    border-bottom: 1px solid #e5e5e5;
  }

  .vocher-rule-table .second-item-row .item {
    border-right: 1px solid #e5e5e5;
    text-align: center;
  }

  .vocher-rule-table .second-item-row .item:first-child {
    padding-left: 21px;
    text-align: left;
  }

  .vocher-rule-table .second-item-row .item:last-child {
    color: #337AB7;
    cursor: pointer;
  }

  .vocher-num-container {
    overflow: hidden;
  }

  .vocher-num-container p {
    float: left;
    color: #666;
    font-weight: bolder;
    line-height: 34px;
  }

  .vocher-num-container .btn {
    float: right;
    text-align: right;
    padding-right: 0;
  }

  .vocher-num-table {
    border: 1px solid #e5e5e5;
    border-radius: 4px;
  }

  .vocher-num-table .title {
    height: 40px;
    line-height: 40px;
    background-color: #F0F2FF;
    color: #A5AAB7;
    font-weight: bolder;
    text-align: center;
  }

  .vocher-num-table .title div {
    border-right: 1px solid #e5e5e5;
  }

  .vocher-num-table .title div:last-child {
    border-right: none;
  }

  .vocher-num-table .vocher-num-table-row {
    box-sizing: border-box;
    border-bottom: 1px solid #e5e5e5;
    background-color: #fff;
  }

  .vocher-num-table .vocher-num-table-row:last-child {
    border-bottom: none;
  }

  .vocher-num-table .vocher-num-table-item {
    /* padding: 0 10px 0 16px; */
    align-items: center;
    display: flex;
    border-right: 1px solid #e5e5e5;
  }

  .vocher-num-table .vocher-num-table-item:last-child {
    border-right: none;
  }
</style>